
//  获取装图片的可视窗口
const banner = document.querySelector('.banner')
//  获取整组图片
const imgBox = document.querySelector('.imgBox')
// 获取图片
const pointBox = document.querySelector('.pointBox')
// 获取可视窗口的宽
// clientWidth获取的是元素 内容+padding区域的尺寸
const banner_width = banner.clientWidth
// 设置一个变量表示当前现实的是索引几
let index = 1
// 准备一个变量接受定时器的返回值
let timer = 0
// 准备一个变量表示开关
let flag = true
// 复制第一个和最后一个元素的函数
copyEle()
function copyEle(){
  // 获取想要复制的元素
  // cloneNode(ture)把后代元素一起克隆
    const first = imgBox.firstElementChild.cloneNode(true)
    const last = imgBox.lastElementChild.cloneNode(true)
  // 开始填充
    imgBox.appendChild(first)
    imgBox.insertBefore(last, imgBox.firstElementChild)

//拿到imgBox 内最新的子元素数量
imgBox.style.width = imgBox.children.length * 100 + '%'
// 设置 imgBox 的 left 样式
imgBox.style.left = -banner_width + 'px'
}
// 设置焦点
setPoint()
function setPoint(){

  // 获取到需要多少个焦点
    const pointNum = imgBox.children.length - 2
  // 生成循环
    for(let i = 0; i < pointNum; i++) {
// 创建li
    // document.createElement('标签名')创建节点
    const li = document.createElement('li')
    // 默认第一个有 active 类名
    if (i === 0) li.classList.add('active')
    // 为了将来的事件委托，给每一个li设置一个独立类名
    li.classList.add('item')
    // 为了将来能拿到该元素的索引
    // 直接以一个 data-point 的自定义属性记录在元素身上
    li.dataset.point = i
    // 把创建的li标签依次插入到 pointBox 内
    pointBox.appendChild(li)
    }
  // 调整 pointBox 的宽度
  pointBox.style.width = pointNum * (20 + 5) + 'px'
}
// 自动轮播
autoPlay()
function autoPlay(){
  // 每间隔2秒换一张
    timer = setInterval(() => {
    // 切换一张的代码
    // 调整index
    index++
    // 利用运动函数来运动
    move(imgBox,{left: -index * banner_width},moveEnd)
    }, 2000);
}
// 运动结束的函数
function moveEnd(){
  // 表示最后一张运动结束，切换回真的第一张
    if(index === imgBox.children.length - 1) {
    // 表示假的最后一张运动结束，需要瞬间定位
    index = 1
    // 瞬间定位
    imgBox.style.left = -index * banner_width + 'px'
    }
  // 判断运动到 [0] 这张的时候切换回真的最后一张
    if(index === 0){
// 表示家的最后一张运动结束，需要瞬间定位
    index = imgBox.children.length - 2
    // 瞬间定位
    imgBox.style.left = -index * banner_width + 'px'
    }
// 设置焦点配套
    for (let i = 0; i < pointBox.children.length; i++){
    pointBox.children[i].classList.remove('active')
    }
//给[index - 1]
// index 表示的当前这张图片的索引
    pointBox.children[index - 1].classList.add('active')
// moveEnd 会在一张图片切换完毕后备调用
// 在moveEnd 里面进行 index 的判断，进行了类名的切换
// 当道 moveEnd 函数的最后一行，表示本次的图片切换已经完整的完成了
// 做好一切准备准备切换下一张了
// 开启开关了
    flag = true
}
// 移入移出
overOut()
function overOut(){
  // 鼠标移入banner停止轮播
  // 关闭定时器
    banner.addEventListener('mouseover', () => clearInterval(timer))
  // 一处banner 再次开启轮播图
  // 再次调用自动播放函数 autoplay
    banner.addEventListener('mouseout',() => autoPlay())
}
// 绑定点击事件
bindEvent()
function bindEvent(){
  // 给banner绑定点击时间
    banner.addEventListener('click',e => {
    // 处理函数兼容
    e = e || window.event
    // 处理事件目标兼容
    const target = e.target || e.srcElement
    // 判断时间目标是哪一个标签
    if(target.className === 'left'){
      // 判断开关
        if(!flag)return
      // 顺手关闭开关
        flag = false
      // 调整index
        index--
      // 利用 move 函数运动到指定位置
      move(imgBox,{left: -index * banner_width},moveEnd)
    }

    if(target.className === 'right'){
      // 判断开关
        if(!flag)return
      // 顺手关闭开关
        flag = false
      // 调整index
        index++
      // 利用 move 函数运动到指定位置
      move(imgBox,{left: -index *banner_width},moveEnd)
    }

    // 为了保证只有点击焦点按钮的时候才能触发
    if(target.className === 'item'){
        if(!flag)return
        flag = false
        index = target.dataset.point - 0 + 1
      move(imgBox,{left: -index *banner_width},moveEnd)
    }
    })
}
// 切换标签页
tabChange()
function tabChange(){
  //绑定时间
    document.onvisibilitychange = function(){
    if(document.visibilityState === 'hidden')clearInterval(timer)
    if(document.visibilityState === 'visible')autoPlay()
    }
}
